<!DOCTYPE html>
<html>

<head>
    <title>Preload</title>

    <!-- 1.7.1/1.11.1/2.1.1 -->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="http://m.ports-intl.com/html/Tpl/default/Public/css/bootstrap.min.css">
</head>

<body>
    <script type="text/javascript">
    var ImageLoad = function() { 
    	this.images = [], this.imageUrls = [], this.imagesLoaded = 0, this.imagesFailedToLoad = 0, this.imageLoadingProgress = 0, this.imageLen = 0 
    };
    ImageLoad.prototype = { 
    	queueImage: function(a) { 
    		var e = this; 
    		return "[object Array]" === Object.prototype.toString.call(a) ? a.forEach(function(a) { e.imageUrls.push(a) }) : this.imageUrls.push(a), this.imageLen = this.imageUrls.length, this }, 

    	preLoad: function(a, e) { this.loadImages(), this.imageLoadingProgressCallback(a, e) }, 
    	loadImages: function() { 
    			var a = this; 
    			return this.imageUrls.forEach(function(e, i) { 
    				var o = new Image;
                	o.src = e, o.complete ? 
                			(a.images[i] = o, a.imagesLoaded++) : 
                			(o.onload = function(e) { 
                				return function() { 
                					a.images[e] = o, a.imagesLoaded++ 
                				} 
                			}(i), 
                			o.onerror = function() { a.imagesFailedToLoad++ }) }), this 
    		}, 
    	imageLoadingProgressCallback: function(a, e) { var i = this,
                o = setInterval(function() { var s = Math.floor((i.imagesLoaded + i.imagesFailedToLoad) / i.imageLen * 100);
                    i.imageLoadingProgress = isNaN(s) ? 100 : s, 100 === i.imageLoadingProgress && (clearInterval(o), setTimeout(function() { e.call(i), i.imagesLoaded = 0, i.imagesFailedToLoad = 0 }, 300)), a.call(i, i.imageLoadingProgress) }, 10) }, 
        getLoadAfterImages: function() { 
            return this.images 
        } 
    }, 
    window.ImageLoad = ImageLoad;


    loadImgArr = [
        'http://www.gjdjjl.cn//fab/images/tese1l.png',
        'http://www.gjdjjl.cn//fab/images/tese1r.png',
        'http://www.gjdjjl.cn//fab/images/tese2l.png',
        'http://www.gjdjjl.cn//fab/images/tese2r.png',
        'http://www.gjdjjl.cn//fab/images/tese3l.png',
        'http://www.gjdjjl.cn//fab/images/tese3r.png',
        'http://www.gjdjjl.cn//fab/images/tese4l.png',
        'http://www.gjdjjl.cn//fab/images/tese4r.png',
        'http://www.gjdjjl.cn//fab/images/sec1-humen.png',
        'http://www.gjdjjl.cn/fab/images/dialog.png',
    ];


    var imageLoad = new ImageLoad(), imageUrls = [];
    imageLoad.queueImage(loadImgArr).preLoad(function(a) {
        $('.loading-number').text(a);
    }, function() {
        // $('.welcom-card-1').addClass('hide');
        // $('.welcom-card-2').removeClass('hide');
        // setTimeout(function() {
        //     $('.welcom-card-2').css({'-webkit-transform': 'translateX(-50%)', 'transform': 'translateX(-50%)'});
        //     setTimeout(function() {
        //         $('.welcom-card-2').addClass('hide');
        //         $('.welcom-card-3').removeClass('hide');
        //         welcomeLoaded();
        //     }, 1000);
        // }, 5000);
        console.log('OK');
        $("#img").attr('src',"http://www.gjdjjl.cn/fab/images/sec1-humen.png");
    });
    $('#setImg').click(function(e){
    	// $("#img").attr('src',"http://www.gjdjjl.cn/fab/images/sec1-humen.png");
    });
    </script>
    <div class="loading-number"></div>
    <div class="container-fluid">
    	<div class="panel panel-default">
    		<div class="panel-body">
    			<button type="button" id="setImg" class="btn btn-info">button</button>
    		</div>
    	</div>
    </div>
    <img src="" id="img">
</body>

</html>